{% load static %}
{% load ecom_mptt_tags %}  <!-- 分类下拉框使用 -->
<!-- 商品添加模态框 -->
<div class="modal fade" id="addProductModal" tabindex="-1" aria-labelledby="addProductModalLabel" aria-modal="true">
    <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable custom-modal-width">
        <div class="modal-content">
            <div class="modal-header bg-primary d-flex align-items-center py-2 px-3">
                <h6 class="modal-title small fw-semibold mb-0">新增商品</h6>
                <button type="button" class="btn-close btn-close-white ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="productForm" enctype="multipart/form-data">
                    {% csrf_token %}
                        <!-- 基本信息 -->
                            <div class="card mb-4">
                                <div class="card-body">
                                    <!-- 主图上传:商品轮播图 -->
                                    {% include 'ecom/product/upload_main_image.html' %}  <!-- 新的上传主图 -->

                                    <!-- 商品名称  -->
                                    <div class="mb-3">
                                        <input type="text" class="form-control" id="productName" name="name" required
                                               placeholder="请输入商品名称...">
                                    </div>

                                    <!-- 商品分类 -->
                                    <div class="mb-3 position-relative">
                                        <div class="d-flex align-items-center gap-2">
                                        <div class="dropdown">
                                            <button class="form-select text-start dropdown-toggle w-auto"
                                                    type="button"
                                                    id="categoryDropdown"
                                                    data-bs-toggle="dropdown"
                                                    aria-expanded="false"
{#                                                    style="overflow: hidden; text-overflow: ellipsis;">#}
                                                style="min-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                                                选择分类 (可多选)
                                            </button>
                                            <!-- 下拉菜单内容 -->
                                            <ul class="dropdown-menu ps-0 pe-4"
                                                aria-labelledby="categoryDropdown"
                                                style="width: auto; min-width: 100%; max-width: 800px; height: 430px; overflow-x: auto; white-space: nowrap;"
                                                id="categoryTreeContainer">
                                                <!-- 动态内容由JS填充 -->
                                            </ul>
                                        </div>
                                        <div id="selectedCategories" class="small text-muted flex-grow-1"></div>
                                    </div>
                                    </div>

                                    <!-- 商品属性 -->
{#                                  {% include 'ecom/product/property_editor.html' %}  <!-- 要删除 -->#}
                                    {% include 'ecom/product/product_form.html' %}  <!-- 新的商品属性 -->

                                    <!-- 视频上传 -->
                                    <div class="card mb-4 border">
                                        <div class="card-body">
                                            <div class="mb-3">
                                                <label class="btn btn-primary btn-sm" for="productVideo">
                                                    <i class="bi bi-cloud-arrow-up me-1"></i>上传视频
                                                </label>
                                                <span class="text-muted small ms-2"
                                                      id="videoFileNameDisplay">支持MP4格式</span>
                                                <input class="d-none"
                                                       type="file"
                                                       id="productVideo"
                                                       name="video"
                                                       accept="video/*">
                                            </div>
                                            <div class="alert alert-light d-flex align-items-center d-none"
                                                 id="uploadVideoAlert">
                                                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
                                                <span>上传中...</span>
                                            </div>
                                            <div class="video-preview d-flex flex-wrap gap-2 mt-3" id="videoPreview">
                                                <div class="border rounded text-center p-4 text-muted preview-placeholder">
                                                    <i class="bi bi-film fs-1"></i>
                                                    <p class="mt-2 mb-0">视频预览区域</p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>


                                </div>
                            </div>
{#                        </div>#}

                        <!-- SKU管理 -->
{#                        <div class="col-md-8">#}
                            <div class="card mb-4">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                    <h6 class="mb-0">SKU管理</h6>
                                    <button type="button" class="btn btn-sm btn-primary" id="addSkuBtn">添加SKU</button>
                                </div>
                                <div class="card-body">
                                    <div class="table-responsive">
                                        <table class="table table-hover" id="skuTable">
                                            <thead>
                                            <tr>
                                                <th>属性组合</th>
                                                <th>图片</th>
                                                <th>价格</th>
                                                <th>库存</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                            <tbody id="skuTableBody">
                                            <!-- SKU行将通过JS动态添加 -->
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>

                            <!-- 商品描述详情长图 -->
                            <div class="card">
                                <div class="card-header bg-light">
                                    <h6 class="mb-0">商品描述详情长图</h6>
                                </div>
                                <div class="card-body">
                                    <div class="mb-3">
                                        <label class="form-label">描述详情内容</label>
                                        <textarea class="form-control" id="productDetails" name="details" rows="3"></textarea>
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">上传描述详情图片</label>
                                        <input class="form-control" type="file" id="detailImages" name="detail_images"
                                               multiple accept="image/*">
                                    </div>
                                </div>
                            </div>
{#                        </div>#}
{#                    </div>#}
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="submitProductBtn">保存商品</button>
            </div>
        </div>
    </div>
</div>

<!-- SKU行模板 -->
<template id="skuRowTemplate">
    <tr class="sku-row">
        <td>
            <div class="input-group mb-2">
                <input type="text" class="form-control attribute-input" placeholder="属性分类:值" required>
                <button class="btn btn-outline-secondary add-attribute-btn" type="button">+</button>
            </div>
            <div class="attributes-container"></div>
        </td>
        <td>
            <input type="file" class="form-control sku-image" accept="image/*">
        </td>
        <td>
            <input type="number" class="form-control sku-price" min="0.01" step="0.01" required>
        </td>
        <td>
            <input type="number" class="form-control sku-stock" min="0" required>
        </td>
        <td>
            <button type="button" class="btn btn-sm btn-danger remove-sku-btn">删除</button>
        </td>
    </tr>
</template>
<style>

  /* 自定义宽度 */
  .custom-modal-width.modal-dialog {
    max-width: 100vw; /* 关键设置：100%视口宽度 */
    width: 90%;
    height: 95%;
  }
  /* 移动端优化 */
  @media (max-width: 992px) {
    .custom-modal-width .modal-dialog {
      max-width: 95%;
    }
  }

</style>